<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d1{
				border: 3px solid gold;
				border-radius: 10px;
			}
		</style>
		<script>
			function chgImg(){
				var p=document.getElementById("p1");
				p.setAttribute("src","../day5/images/3.jpg");
			}
			function addImg(){
				var img=document.createElement("img");
				img.setAttribute("src","../day5/images/2.jpg");
				img.setAttribute("height","20%");
				img.setAttribute("width","20%");
				var d=document.getElementById("d1");
				d.appendChild(img);
			}
			function cloneDiv(){
				var d=document.getElementById("d1");
				document.body.appendChild(d.cloneNode(true));
				
			}
			function delImg(){
				var d=document.getElementById("d1");
				d.removeChild(d.firstElementChild);
				//删不掉。通过父元素删除子元素
				//d.parentNode.removeChild(d.firstElementChild);
			}
		</script>
	</head>
	<body>
		<div id="d1">
			<img id="p1" src="../day5/images/1.jpg"/>
		</div>
		<div id="btg">
			<input type="button" value="更换图片" onclick="chgImg()">
			<input type="button" value="加一张图片到div里面" onclick="addImg()">
			<input type="button" value="复制整个div d1,加到后面" onclick="cloneDiv()">
			<input type="button" value="删除d1的第一张图片" onclick="delImg()">
		</div>
	</body>
</html>
